<template>
  <default-layout>
    <header-back text="档案转出" slot="header"></header-back>
    <div slot="main">
      <transition name="fade" mode="out-in">
        <div v-if="status === 'form'" key="form">
          <div class="form-list">
            <div class="form-list-item">
              <span class="label">姓名：</span>
              <span class="content">{{detail.aac003}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">档案号：</span>
              <span class="content">{{detail.archiveCode}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">身份证号：</span>
              <span class="content">{{detail.aac002}}</span>
            </div>
            <div class="form-list-item">
              <span class="label">档案状态：</span>
              <span class="content">{{detail.archiveStatusName}}</span>
            </div>
          </div>
          <div class="form">
            <yd-cell-group>
              <yd-cell-item>
                <span slot="left" class="label required">转出原因：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写转出原因'}]"
                  v-model="form.remark"
                  ref="remark"
                  placeholder="请填写转出原因"></xf-input>
              </yd-cell-item>
              <!--<yd-cell-item>
                <span slot="left" class="label required">联系电话：</span>
                <xf-input
                  slot="right"
                  :valid="[{required: true, msg: '请填写手机号'}, {reg: $regex.phone, msg: '请填写正确的手机号'}]"
                  v-model="form.mobilePhone"
                  ref="mobilePhone"
                  placeholder="请填写手机号"></xf-input>
              </yd-cell-item>-->
              <yd-cell-item>
                <span slot="left" class="label required">身份证材料：</span>
                <div class="img-right" slot="right">
                  <div class="img-box">
                    <upload-image
                      v-model="form.file1"
                      ref="file1"
                      type="21"
                      file-name="身份证正面"></upload-image>
                    <span>正面</span>
                  </div>
                  <div class="img-box">
                    <upload-image
                      v-model="form.file2"
                      ref="file2"
                      type="21"
                      file-name="身份证反面"></upload-image>
                    <span>反面</span>
                  </div>
                </div>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">商调函：</span>
                <div class="img-right" slot="right">
                  <div class="img-box">
                    <upload-image
                      v-model="form.file3"
                      ref="file3"
                      type="21"
                      file-name="商调函"></upload-image>
                    <span>商调函</span>
                  </div>
                </div>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label">材料清单：</span>
                <div class="img-right" slot="right">
                  <upload-image-group
                    file-name="其他材料"
                    v-model="fileList"
                    type="21"
                    :max="5"></upload-image-group>
                </div>
              </yd-cell-item>
              <div class="next">
                <div class="next">
                  <mt-button size="large" type="primary" @click="onSubmit">申请转出</mt-button>
                </div>
              </div>
            </yd-cell-group>
          </div>
        </div>
        <transfer-waiting v-if="status === 'waiting'" key="waiting"></transfer-waiting>
      </transition>
    </div>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import UploadImage from '../../../components/upload-image/upload-image.vue'
  import TransferWaiting from './transfer-waiting.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {mapGetters} from 'vuex'
  import UploadImageGroup from '../../../components/upload-image-group/upload-image-group'
  import {arrToForm, validate, personalRecord} from '../../../common/js/util'

  export default {
    components: {
      UploadImageGroup,
      DefaultLayout,
      TransferWaiting,
      UploadImage,
      XfInput,
      HeaderBack},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    data() {
      return {
        form: {
          /*
          * materialType: 材料预审类型
          * 0 党员预审
          * 1 医保预审
          * 2 社保预审
          * 3 认证预审
          * 4 申请商调函
          * 5 档案转出
          * 6 开具涉党声明
          * 7 职称申报
          * 8 户籍关系转出
          * 9 户籍关系转入
          * */
          mobilePhone: '',
          materialType: 5,
          materialName: '',
          remark: '', // 备注
          file1: '', // 身份证正面
          file2: '', // 身份证反面
          file3: '' // 商调函
        },
        detail: {},
        fileList: [],
        status: 'form'
      }
    },
    methods: {
      // 档案信息查询
      getInfo() {
        personalRecord().then(res => {
          this.detail = res.archivesSearchForm
        })
      },
      onSubmit() {
        validate.call(this, this.form).then(() => {
          const form = {
            mobilePhone: this.form.mobilePhone,
            materialType: this.form.materialType,
            materialName: this.form.materialName,
            remark: this.form.remark,
            ...arrToForm([this.form.file1, this.form.file2, this.form.file3, ...this.fileList], 'attachmentList')
          }
          this.$post('/sapi/preaudit/materialPreaudit/post', form, loading => { this.$message.loading(loading) }).then(res => {
            this.status = 'waiting'
          })
        })
      }
    },
    created() {
      this.getInfo()
      // this.form.mobilePhone = this.userInfo.aae005
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .form-list{
    margin: 0 0 .2rem 0;
  }
  .file{
    width: 0;
    height: 0;
    visibility: hidden;
  }
  .img-right{
    display: flex;
    align-items: center;
    padding: .2rem 0;
    width: 100%;
    .img-box{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 .2rem;
      .upload-img,img{
        width: 2rem;
      }
      span{
        margin: .15rem 0 0 0;
      }
    }
  }
</style>
